<template>
<!-- 保存地址 -->
  <div>
    <van-nav-bar
      title="乐购"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 内容区 -->
    <van-field v-model="list.name" placeholder="姓名" />
    <van-field v-model="list.mobile" type="tel" placeholder="手机号" />
    <van-cell is-link @click="showPopup">
      <van-field placeholder="省份/城市/区县" />
    </van-cell>
    <van-popup v-model="show" position="bottom">
      <van-area :area-list="areaList" @confirm="select" @cancel="cancel" />
    </van-popup>
    <van-field v-model="list.address_detail" placeholder="详细地址，如街道/楼盘号等" />
    <van-cell-group>
      <van-switch-cell v-model="checked" title="设置为默认选择地址" />
    </van-cell-group>
    <van-button type="danger" size="large" @click="save">保存</van-button>
    <!-- <van-address-edit
  :area-list="areaList"
  :show-delete= false
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave()"

/> -->
  </div>
</template>

<script>
import { saveAction, detailAction } from "@/api/cart/addAddress";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      // tel: "",
      // text: "",
      // value:'',
      areaList,
      show: false,
      checked: false,
      list: {},
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    showPopup() {
      this.show = true;
    },
    save() {
      saveAction({
        address: this.list.address,
        addressId: this.$route.query.id ? this.$route.query.id : "",
        checked: this.checked,
        detailadress: this.list.address_detail,
        openId: localStorage.getItem("openId"),
        telNumber: this.list.mobile,
        userName: this.list.name,
      }).then((res) => {
        console.log(res);
        this.$router.go(-1);
      });
    },
    select(val) {
      console.log(val);
      var res = val.map((el) => {
        return el.name;
      });
      this.list.address = res.join(",");
      console.log(this.list.address );
      this.show = !this.show;
    },
    cancel() {
      this.show = false;
    },
    init() {
      detailAction({
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.list = res.data;
    this.checked = this.list.is_default == 1 ? true : false
      });
    },
  },
};
</script>

<style lang="scss">
.van-button--large {
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>